<template>
  <div>
    <!-- 查询区域 -->
    <a-card class="card-header">
      <a-form-model ref="modelForm" :model="model">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="logisticsPersonneName"
              label="签收人"
            >
              <a-input
                disabled
                placeholder="请输入签收人"
                v-model.trim="model.logisticsPersonneName"
              />
            </a-form-model-item>
          </a-col>

          <a-col :span="6">
            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="recipient"
              label="接受者"
            >
              <a-input
                disabled
                placeholder="请输入接受者"
                v-model.trim="model.recipient"
              />
            </a-form-model-item>
          </a-col>

          <a-col :span="6">
            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="equipmentNumber"
              label="机台编号"
            >
              <a-input-number
                :min="0"
                disabled
                style="width:100%"
                placeholder="请输入机台编号"
                v-model.trim="model.equipmentNumber"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>

    <!-- 表格区域 -->
    <a-card class="card-content">
      <div class="requiredNews">计划用料</div>
      <br />
      <a-table
        :columns="columns"
        :data-source="model.planDemandQuantityVOList"
        :loading="loading"
        :pagination="false"
        :rowKey="(record, index) => record.id"
      >
      </a-table>
    </a-card>
    <div class=" footer-btn" v-if="model.recipient == null">
      <a-button type="primary" @click="handleSubmit">保存</a-button>
    </div>
  </div>
</template>

<script>
import api from "@/api/apiServer";
import { columns } from "./components/tableConfig";
import { tableMinxins } from "@/unit/mixins/tableMinxins.js";

export default {
  mixins: [tableMinxins],
  data() {
    return {
      columns,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      model: {},
    };
  },
  mounted() {
    let { outStoreNum } = this.$route.query;
    if (outStoreNum) {
      this.getExstockMaterialAcceptance(outStoreNum);
    }
  },
  computed: {
    receiveMaterialUserId() {
      return this.$store.state.menu.userInfo.id;
    },
  },
  methods: {
    // 获取物料接受
    async getExstockMaterialAcceptance(outStoreNum) {
      let params = {
        outStoreNum,
        receiveMaterialUserId: this.receiveMaterialUserId,
      };
      const res = await api.ExstockMaterialAcceptance({ id });
      this.model = res.data;
    },
    async handleSubmit() {
      const res = await api.ExstockAcceptance({ id: this.model.id });
      if (res.code && res.code !== 200) {
        this.$message.error(res.message);
        return;
      }
      this.$message.success(res.message);
      setTimeout(() => {
        this.$router.go(-1);
      }, 500);
    },
  },
};
</script>

<style lang="less" scoped>
.card-header {
  margin: 20px 0;
}
button {
  margin-right: 13px;
}
.card-content {
  margin-bottom: 20px;
  .contetnBox {
    border: 1px solid #ebedf0;
    border-radius: 2px;
    padding: 20px 0;
    .headerBox {
      padding: 0 20px;
    }
  }
}
.ant-form-item {
  margin: 10px 0;
}
.tableSpan {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 600;
  color: #1a5eff;
}

.footer-btn {
  width: 100%;
  text-align: center;
  margin: 37px 0;
  button {
    width: 200px;
    height: 40px;
    background: #1a5eff;
    border-radius: 2px;
  }
}
.requiredNews {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 600;
  color: #1a5eff;
  margin-bottom: 12px;
}
</style>
